﻿<!DOCTYPE html>
<!--重大隐患信息录入-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <script src="/static/js/wangEditor.min.js" type="text/javascript"></script>

    <link href="/static/js/wangEditor.min.css" rel="stylesheet" />
    <style>
        .el-form-item--mini .el-form-item__content,
        .el-form-item--mini .el-form-item__label {
            line-height: 18px !important;
        }

        body {
            padding-bottom: 10px;
        }
    </style>
    <style>
        .vue-treeselect__menu-container {
            z-index: 10002 !important;
        }

        .el-picker-panel {
            z-index: 10002 !important;
        }

        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak class="popupW100">
        <el-form :model="Form" status-icon :rules="rules" ref="ruleForm" size="mini" label-position="right">
            <el-row>
                <el-col :span="11">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item v-if="IsEdit">
                                <el-input type="text" v-model="Form.RiskName" autocomplete="off" size="mini">
                                    <template slot="prepend">
                                        {{RisksManagement.MajorRiskDossier.RiskName+mark.m}}
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="!IsEdit" :label="RisksManagement.MajorRiskDossier.RiskName+mark.m"
                                class="inputTextarea">
                                {{Form.RiskName}}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="11" offset="2">
                    <el-col>
                        <div class="elst-select-mini">
                            <el-form-item v-if="IsEdit">
                                <el-input type="text" v-model="Form.RiskNum" autocomplete="off" size="mini">
                                    <template slot="prepend">
                                        {{RisksManagement.MajorRiskDossier.RiskNum+mark.m}}
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="!IsEdit" :label="RisksManagement.MajorRiskDossier.RiskNum+mark.m"
                                class="inputTextarea">
                                {{Form.RiskNum}}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item v-if="IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.ReportDiscussion+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.ReportDiscussion"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="!IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.ReportDiscussion+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.ReportDiscussion"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item v-if="IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.ReviewOpinions+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.ReviewOpinions"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="!IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.ReviewOpinions+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.ReviewOpinions"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item v-if="IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.Solution+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.Solution"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="!IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.Solution+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.Solution"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>


            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item v-if="IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.TimeNode+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.TimeNode"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item v-if="!IsEdit">
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{RisksManagement.MajorRiskDossier.TimeNode+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.TimeNode"
                                    autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>

            </el-row>





            <el-row v-if="IsEdit">

                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.MajorRiskDossier.Leading+mark.m}}
                                </template>
                                <treeselect v-model="Form.Leading" :options="Leading" :flat="true" :show-count="true"
                                    :disable-branch-nodes="true" slot="suffix"
                                    style="line-height:28px;width:70%;float: right;" placeholder="请选择" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="!IsEdit">

                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item :label="RisksManagement.MajorRiskDossier.Leading+mark.m" class="inputTextarea">
                            {{formatter(Form.Leading)}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item v-if="IsEdit" :label="RisksManagement.MajorRiskDossier.AcceptanceReport+mark.m"
                        prop="AcceptanceReport" class="inputTextarea">
                        <div id="editor" style="margin-bottom:10px;"></div>
                    </el-form-item>
                    <el-form-item v-if="!IsEdit" :label="RisksManagement.MajorRiskDossier.AcceptanceReport+mark.m"
                        class="inputTextarea">
                        {{Form.AcceptanceReport}}
                    </el-form-item>
                </el-col>
            </el-row>
            <!--<el-row>
        <el-col>
            <div id="editor" style="margin-bottom:10px;" v-if="IsEdit"></div>
            <el-form-item v-if="!IsEdit" :label="RisksManagement.MajorRiskDossier.AcceptanceReport+mark.m" class="inputTextarea">
                {{Form.AcceptanceReport}}
            </el-form-item>

        </el-col>
    </el-row>-->
            <el-row v-if="IsEdit">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.MajorRiskDossier.Acceptancer+mark.m}}
                                </template>
                                <treeselect v-model="Form.Acceptancer" :options="Acceptancer" :flat="true"
                                    :show-count="true" :disable-branch-nodes="true" slot="suffix"
                                    style="line-height:28px;width:70%;float: right;" placeholder="请选择" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row v-if="!IsEdit">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item :label="RisksManagement.MajorRiskDossier.Acceptancer+mark.m"
                            class="inputTextarea">
                            {{formatter(Form.Acceptancer)}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <!--<el-form-item v-if="IsEdit">
        <el-input size="mini">
            <template slot="prepend">
                {{RisksManagement.MajorRiskDossier.AcceptanceTime+mark.m}}
            </template>
            <el-date-picker slot="suffix" v-model="Form.AcceptanceTime" type="datetime" size="mini"
                            placeholder="选择时间">
            </el-date-picker>
        </el-input>
    </el-form-item>-->
                        <el-form-item v-if="IsEdit">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.MajorRiskDossier.AcceptanceTime+mark.m}}
                                </template>
                                <el-date-picker v-model="Form.AcceptanceTime" type="date" slot="suffix" size="mini"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="!IsEdit" :label="RisksManagement.MajorRiskDossier.AcceptanceTime+mark.m"
                            class="inputTextarea">
                            {{Form.AcceptanceTime}}
                        </el-form-item>
                    </div>
                </el-col>










            </el-row>
            <el-row v-if="IsEdit">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.MajorRiskDossier.Judges+mark.m}}
                                </template>
                                <treeselect v-model="Form.Judges" :multiple="true" :options="Judges" :flat="true"
                                    :show-count="true" :disable-branch-nodes="true" slot="suffix"
                                    style="line-height:14px;width:70%;float: right;" placeholder="请选择" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row v-if="!IsEdit">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item :label="RisksManagement.MajorRiskDossier.Judges+mark.m" class="inputTextarea">
                            {{formatter(Form.Judges)}}
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" v-if="IsEdit" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}
                    </el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>
        </el-form>

    </div>

    <script type="text/javascript">
        var E = window.wangEditor
        app = new Vue({
            el: '#app',
            data: {
                //父业传参
                id: '',
                type: '',
                IsEdit: true,
                Editor: "",
                EditerValue: "",
                mydata: PersonInChargeTree,
                //业务表单内容
                Form: {
                    id: guidEmpty,
                    RiskName: '',
                    RiskNum: '',
                    ReportDiscussion: '',
                    ReviewOpinions: '',
                    Solution: '',
                    TimeNode: '',
                    Leading: null,
                    AcceptanceReport: '<p>这里的内容是竣工验收报告AcceptanceReport</p>这个编辑器样式上无法直接替换textarea，且宽度缩小后，图标不随动',
                    Acceptancer: null,
                    AcceptanceTime: '',
                    Judges: null,
                },
                Leading: [],
                Acceptancer: [],
                Judges: [],
                //表单验证
                rules: {

                }
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    //读取文本编辑器内容
                    this.Form.AcceptanceReport = this.Editor.txt.html();
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            onSubmitForm(this, '/api/MajorRiskDossier/Save', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });

                },
                getData: function () {
                    getData(this, '/api/MajorRiskDossier/get?id=' + this.id);
                },
                showhtml: function () {

                    this.EditerValue = this.Editor.txt.html();
                },
                showtext: function () {

                    alert(this.Editor.txt.text())

                },
                //格式化人员id
                formatter: function (val) {
                    if (val) {
                        if (typeof val === 'string' || typeof val === 'number') {
                            return getTreeValue(this.mydata, val)
                        }
                        else {
                            var result = '';
                            for (var i = 0; i < val.length; i++) {
                                result += getTreeValue(this.mydata, val[i]) + '，';
                            }
                            result = result.substr(0, result.length - 1);
                            return result;
                        }
                    }
                }
            },
            mounted: function () {
                this.Editor = new E('#editor');
                this.Editor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'table',  // 表格
                    'undo',  // 撤销
                    'redo'  // 重复
                ];
                this.Editor.create();

                this.Leading = fn(this.mydata, "0");
                this.Acceptancer = fn(this.mydata, "0");
                this.Judges = fn(this.mydata, "0");
                this.id = getUrlParam("id");
                this.type = getUrlParam("type");
                this.getData();
                //editer赋值
                this.Editor.txt.html(this.Form.AcceptanceReport);


                if (this.type && this.type == 'ck') {
                    this.IsEdit = false;
                }


            }
        });
    </script>
</body>

</html>